<template>
  <div class="secondly-color p-4 uni-shadow rounded-md">
    <el-divider content-position="left">基础资料</el-divider>
    <el-form
      ref="form"
      size="small"
      label-width="80px"
      label-position="right"
      v-if="profile != null"
    >
      <!-- 姓名 -->
      <el-form-item
        label="姓名"
        prop="name"
      >
        <el-input
          v-model="profile.nickName"
          placeholder="请输入你的昵称..."
          @blur="modifyUserProfileEventHandle"
        ></el-input>
      </el-form-item>
      <!-- 签名 -->
      <el-form-item
        label="签名"
        prop="name"
      >
        <el-input
          v-model="profile.signature"
          placeholder="请输入你的签名..."
          @blur="modifyUserProfileEventHandle"
        ></el-input>
      </el-form-item>

      <!-- 邮箱 -->
      <el-form-item
        label="邮箱"
        prop="name"
      >
        <el-input
          v-model="profile.email"
          placeholder="请输入你的邮箱..."
          @blur="modifyUserProfileEventHandle"
        ></el-input>
      </el-form-item>

      <el-form-item label="头像">
        <el-upload
          class="upload-demo w-full"
          drag
          :limit="1"
          :action="API.BASE + API.FILE_UPLOAD.URL"
          :headers="authHeaders()"
          :file-list="uploadList"
          @success="uploadSuccessEventHandle"
          @error="uploadErrorEventHandle"
        >
          <div class="el-upload__text">拖入头像上传 或者 <em>点击上传</em></div>
          <template #tip>
            <div class="el-upload__tip">
              jpg/png files with a size less than 500kb
            </div>
          </template>
        </el-upload>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { NuxtLayout } from "#components";
import type { UploadUserFile } from "element-plus";
import { API } from "~/models/api";
import type { FileResponse } from "~/models/file";
import type { ResponseMsg } from "~/models/universal";
import type { UserProfileResponse } from "~/models/user";

definePageMeta({
  layout: "user-layout",
  // 先关闭认证
  middleware: ["auth"],
  // middleware: ["log"],
});
// 资料
const profile = useUserProfile();
// 旧资料
let oldProfile = JSON.parse(JSON.stringify(profile.value));
// 上传文件列表
const uploadList = ref<UploadUserFile[]>([]);

// 上传成功事件处理
const uploadSuccessEventHandle = (response: ResponseMsg<FileResponse>) => {
  if (profile.value == null) return;

  if (response.status) {
    profile.value.avatarUrl = response.data.cosUrl;
    modifyUserProfileEventHandle();
  }

  createSimpleElNotification(
    !!response.status,
    !!response.status ? "上传成功" : "上传失败"
  );
  uploadList.value = [];
  //TODO 这里注意一下上传失败的返回值
};

// 上传失败事件处理
const uploadErrorEventHandle = (error: any) => {};

// 修改用户资料
const modifyUserProfileEventHandle = async () => {
  if (deepEquals(oldProfile, profile.value)) return;
  else oldProfile = JSON.parse(JSON.stringify(profile.value));

  let result = await $fetch<ResponseMsg<UserProfileResponse>>(
    "/api/user/modifySelfProfile",
    {
      body: toRaw(profile.value),
      method: "POST",
      headers: authHeaders(),
    }
  );
  // 发出一个通知
  ElNotification({
    message: result.status ? "修改成功" : "修改失败",
    type: result.status ? "success" : "error",
    showClose: false,
    duration: 500,
  });
};
</script>

<style lang="scss" scoped>
:deep(.el-input__wrapper) {
  border: none;
  box-shadow: none;
  border-radius: 0px;
  border-bottom: 1px solid var(--color-10);
}

:deep(.el-input__wrapper:hover) {
  border: none;
  box-shadow: none;
  border-bottom: 1px solid var(--color-100);
}

:deep(.is-focus) {
  // background-color: rgba($color: #000000, $alpha: 1);
  border: none;
  box-shadow: none;
  border-bottom: 1px solid var(--color-80);
}
</style>
